<template>
	<view class="header-box">
		<view class="header _flex _font">
			<view></view>
			<view class="_background-1 _radius-15p" style="padding: 0 20px;">
				<n-menu></n-menu>
			</view>
			<view>
				<view v-if="!userinfo" @click="logout" class="username">登录</view>
				<el-dropdown style="height: 100%;align-items: center;" v-else>
					{{userinfo.account}}
					<template #dropdown>
						<el-dropdown-menu>
							<el-dropdown-item @click="$refs.passwordPopup.open()">{{ $t("topwindow.text.changePwd") }}
							</el-dropdown-item>
							<el-dropdown-item @click="refreshMenu">刷新菜单</el-dropdown-item>
							<el-dropdown-item @click="logout">{{ $t("topwindow.text.signOut") }}</el-dropdown-item>
						</el-dropdown-menu>
					</template>
				</el-dropdown>
			</view>
			<uni-popup ref="passwordPopup" type="center">
				<view class="modal" style="width:400px; padding: 20px;">
					<update-password class="password-popup" :isPhone="true" v-on:closePasswordPopup="$refs.passwordPopup.close()" />
				</view>
			</uni-popup>
		</view>
	</view>
</template>

<script>
	import {
		mapActions,
		mapState
	} from 'vuex';

	import updatePassword from '@/windows/components/update-password.vue'

	export default {
		components: {
			updatePassword
		},
		computed: {
			...mapState('login', ['userinfo'])
		},
		methods: {
			...mapActions("menu", ["refreshMenu"]),
			logout() {
				this.$store.dispatch('login/logout');
				this.$toolUni.toPage("/pages/static/login/login");
			}
		}
	}
</script>

<style lang="scss" scoped>
	.header-box {
		height: 0px;
		position: fixed;
	}
	.header {
		color: #666;
		height: 0;
		padding: 0 20px;
	}
	.username {
		height: 100%;
		line-height: 28px;
	}
</style>
